<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>index</title>
		<link rel="stylesheet" href="./css/style/bootstrap-vue.css" />
		<link rel="stylesheet" href="./css/app-creative.css" />
		<link rel="stylesheet" href="./css/material-colors.css" />
		<link rel="stylesheet" href="./css/bg.css" />
		<link rel="stylesheet" href="./css/button.css" />
	</head>
	
	<body>
		<div id="app">
			<div class="pb-2">
				<div class="row g-2">
					<div class="col-3">
						<label class="form-label">参考值时间</label>
						<div class="input-group">
							<input type="datetime-local" class="form-control" />
							<button class="btn btn-light" type="button">提取数据</button>
						</div>
					</div>
					<div class="col-2">
						<label class="form-label">评分时间</label>
						<input type="datetime-local" class="form-control" />
					</div>
					<div class="col text-end">
						<label class="form-label">&nbsp;</label><br />
						<button class="btn btn-primary"><i class="mdi mdi-content-save"></i> 保存</button>
						<button class="btn btn-outline-primary"><i class="mdi mdi-close"></i> 清空</button>
					</div>
				</div>
			</div>
			<table class="table table-sm table-bordered m-0">
				<thead>
					<tr>
						<th>分组</th>
						<th width="160">项目</th>
						<th class="text-center bg-green-50">0分</th>
						<th class="text-center bg-yellow-50">1分</th>
						<th class="text-center bg-orange-50">2分</th>
						<th class="text-center bg-red-50">3分</th>
						<th class="text-center bg-red-100">4分</th>
						<th width="140">参考值</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td class="bg-lighter">呼吸</td>
						<td>PaO2/FiO2</td>
						<td><button class="btn btn-sm btn-link w-100">≥400</button></td>
						<td><button class="btn btn-sm btn-outline-primary w-100">＜400</button></td>
						<td><button class="btn btn-sm btn-link w-100">＜300</button></td>
						<td><button class="btn btn-sm btn-link w-100">＜200且呼吸机支持</button></td>
						<td><button class="btn btn-sm btn-link w-100">＜100且呼吸机支持</button></td>
						<td class="py-1">
							<div class="input-group flex-nowrap">
								<input type="text" class="form-control form-control-sm" value="330" />
								<span class="input-group-text">12:33</span>
							</div>
						</td>
					</tr>
					<tr>
						<td class="bg-lighter">凝血</td>
						<td class="py-1">
							血小板<br />
							<small class="text-muted">x10(9)/L</small>
						</td>
						<td><button class="btn btn-sm btn-link w-100">≥150</button></td>
						<td><button class="btn btn-sm btn-link w-100">＜150</button></td>
						<td><button class="btn btn-sm btn-outline-primary w-100">＜100</button></td>
						<td><button class="btn btn-sm btn-link w-100">＜50</button></td>
						<td><button class="btn btn-sm btn-link w-100">＜20</button></td>
						<td class="py-1">
							<div class="input-group flex-nowrap">
								<input type="text" class="form-control form-control-sm" value="90" />
								<span class="input-group-text">10:00</span>
							</div>
						</td>
					</tr>
					<tr>
						<td class="bg-lighter">肝脏</td>
						<td class="py-1">
							胆红素<br />
							<small class="text-muted">umol/L</small>
						</td>
						<td><button class="btn btn-sm btn-link w-100">＜20</button></td>
						<td><button class="btn btn-sm btn-link w-100">20-32</button></td>
						<td><button class="btn btn-sm btn-link w-100">33-101</button></td>
						<td><button class="btn btn-sm btn-outline-primary w-100">102-204</button></td>
						<td><button class="btn btn-sm btn-link w-100">＞204</button></td>
						<td class="py-1">
							<div class="input-group flex-nowrap">
								<input type="text" class="form-control form-control-sm" value="167" />
								<span class="input-group-text">10:30</span>
							</div>
						</td>
					</tr>
					<tr>
						<td rowspan="5" class="bg-lighter">循环</td>
						<td class="py-1">
							平均动脉压<br />
							<small class="text-muted">mmHg</small>
						</td>
						<td><button class="btn btn-sm btn-link w-100">≥70</button></td>
						<td><button class="btn btn-sm btn-outline-primary w-100">＜70</button></td>
						<td></td>
						<td></td>
						<td></td>
						<td class="py-1">
							<div class="input-group flex-nowrap">
								<input type="text" class="form-control form-control-sm" value="" />
								<span class="input-group-text">--:--</span>
							</div>
						</td>
					</tr>
					<tr>
						<td class="py-1">
							多巴胺剂量<br />
							<small class="text-muted">ug/kg/min</small>
						</td>
						<td></td>
						<td></td>
						<td><button class="btn btn-sm btn-link w-100">≤5</button></td>
						<td><button class="btn btn-sm btn-link w-100">＞5</button></td>
						<td><button class="btn btn-sm btn-link w-100">＞15</button></td>
						<td class="py-1">
							<div class="input-group flex-nowrap">
								<input type="text" class="form-control form-control-sm" value="" />
								<span class="input-group-text">--:--</span>
							</div>
						</td>
					</tr>
					<tr>
						<td class="py-1">
							肾上腺素剂量<br />
							<small class="text-muted">ug/kg/min</small>
						</td>
						<td></td>
						<td></td>
						<td></td>
						<td><button class="btn btn-sm btn-link w-100">≤0.1</button></td>
						<td><button class="btn btn-sm btn-link w-100">＞0.1</button></td>
						<td class="py-1">
							<div class="input-group flex-nowrap">
								<input type="text" class="form-control form-control-sm" value="" />
								<span class="input-group-text">--:--</span>
							</div>
						</td>
					</tr>
					<tr>
						<td class="py-1">
							去甲肾腺剂量<br />
							<small class="text-muted">ug/kg/min</small>
						</td>
						<td></td>
						<td></td>
						<td></td>
						<td><button class="btn btn-sm btn-link w-100">≤0.1</button></td>
						<td><button class="btn btn-sm btn-link w-100">＞0.1</button></td>
						<td class="py-1">
							<div class="input-group flex-nowrap">
								<input type="text" class="form-control form-control-sm" value="" />
								<span class="input-group-text">--:--</span>
							</div>
						</td>
					</tr>
					<tr>
						<td class="py-1">
							多巴酚丁胺<br />
							<small class="text-muted">是/否</small>
						</td>
						<td></td>
						<td></td>
						<td><button class="btn btn-link w-100">是</button></td>
						<td></td>
						<td></td>
						<td class="py-1">
							<div class="input-group flex-nowrap">
								<input type="text" class="form-control form-control-sm" value="" />
								<span class="input-group-text">--:--</span>
							</div>
						</td>
					</tr>
					<tr>
						<td class="bg-lighter">神经</td>
						<td>GCS评分</td>
						<td><button class="btn btn-sm btn-link w-100">15</button></td>
						<td><button class="btn btn-sm btn-link w-100">13-14</button></td>
						<td><button class="btn btn-sm btn-outline-primary w-100">10-12</button></td>
						<td><button class="btn btn-sm btn-link w-100">6-9</button></td>
						<td><button class="btn btn-sm btn-link w-100">＜6</button></td>
						<td class="py-1">
							<div class="input-group flex-nowrap">
								<input type="text" class="form-control form-control-sm" value="" />
								<span class="input-group-text">--:--</span>
							</div>
						</td>
					</tr>
					<tr>
						<td rowspan="2" class="bg-lighter">肾脏</td>
						<td class="py-1">
							肌酐<br />
							<small class="text-muted">umol/L</small>
						</td>
						<td><button class="btn btn-sm btn-link w-100">＜100</button></td>
						<td><button class="btn btn-sm btn-link w-100">110-170</button></td>
						<td><button class="btn btn-sm btn-link w-100">171-299</button></td>
						<td><button class="btn btn-sm btn-link w-100">300-440</button></td>
						<td><button class="btn btn-sm btn-link w-100">＞440</button></td>
						<td class="py-1">
							<div class="input-group flex-nowrap">
								<input type="text" class="form-control form-control-sm" value="" />
								<span class="input-group-text">--:--</span>
							</div>
						</td>
					</tr>
					<tr>
						<td class="py-1">
							24小时尿量<br />
							<small class="text-muted">ml</small>
						</td>
						<td></td>
						<td></td>
						<td></td>
						<td><button class="btn btn-sm btn-link w-100">200-500</button></td>
						<td><button class="btn btn-sm btn-outline-primary w-100">＜200</button></td>
						<td class="py-1">
							<div class="input-group flex-nowrap">
								<input type="text" class="form-control form-control-sm" value="" />
								<span class="input-group-text">--:--</span>
							</div>
						</td>
					</tr>
					<tr class="table-active">
						<td colspan="7" class="text-sm">
							1、每日评估时应采取每日最差值；<br />2、分数越高，预后越差。<br />
							每日都需要评估SOFA评分，当SOFA评分每日变化≥2时，可以认为是感染患者出现了器官衰竭的急性变化。
						</td>
						<td class="text-center">
							总分
							<h1 class="text-danger m-0">14</h1>
						</td>
					</tr>
				</tbody>
			</table>

		</div>
		<script src="./js/vue/vue.js"></script>
		<script src="./js/index.js"></script>
	</body>

</html>
